<template>
	<div id="MainBox">
	<!-- 		用户账号管理页面-->
			<div id="line03">
				账号状态<el-select v-model="param.state01" placeholder="选择账号状态">
			        <el-option
			                v-for="item in CheckState"
			                :key="item.value"
			                :label="item.label"
			                :value="item.value">
			            <span style="">{{ item.label }}</span>
			        </el-option>
			    </el-select>
				名字搜索<div id="line01">
					<el-input v-model="param.name01" placeholder="模糊查询姓名">
						<template slot="prepend">姓名</template>
					</el-input>
				</div>
				<el-button type="primary" @click="queryAll">查询</el-button>
			</div>
			<el-table
			        :data="list"
			        border
			        style="width: 100%">
			    <el-table-column
			            prop="userName"
			            label="用户名"
			            width="80">
			    </el-table-column>
			    <el-table-column
			            prop="tel"
			            label="手机号"
			            width="100">
			    </el-table-column>
			    <el-table-column
			            prop="cardId"
			            label="身份证号"
			            width="100">
			    </el-table-column>
			    <el-table-column
			            prop="role"
			            label="角色"
			            width="100">
			    </el-table-column>
			    <el-table-column
			            prop="password"
			            label="密码"
			            width="100">
			    </el-table-column>
			    <el-table-column
			            prop="photo"
			            label="头像"
			            width="100">
			    </el-table-column>
				<el-table-column
				        prop="balance"
				        label="账户余额"
				        width="80">
				</el-table-column>
				<el-table-column
				        prop="cartId"
				        label="车牌"
				        width="100">
				</el-table-column>
				<el-table-column
				        prop="status"
						:formatter="stateFormatter"
				        label="账号状态"
				        width="100">
				</el-table-column>
				<el-table-column
				        prop="credit"
				        label="信誉度"
				        width="50">
				</el-table-column>
				<el-table-column
				        prop="createTime"
				        label="创建时间"
				        width="160">
				</el-table-column>
				<el-table-column
				        prop="updateTime"
				        label="上次更新时间"
				        width="160">
				</el-table-column>
			    <el-table-column
			            label="操作"
			            width="200">
						<template slot-scope="scope">
							<el-button type="primary" v-if="scope.row.status!=1" @click="examineUpdate(scope.row.userId,scope.row.status)">封号</el-button>
							<el-button type="primary" v-if="scope.row.status!=0" @click="examineUpdate(scope.row.userId,scope.row.status)">解封</el-button>
						</template>
			    </el-table-column>
			</el-table>
			<el-pagination
			        background
			        layout="prev, pager, next"
			        :total="paramsend.total"
			        :page-size="paramsend.pageSize"
			        :current-page="paramsend.current"
			        @next-click="next" @prev-click="prev" @current-change='search'>
			</el-pagination>
		</div>
</template>

<script>
	import $ from "jquery";
	export default{
		data:function(){
			return{list:[],
			//下为展示数组
			CheckState:[{value:0,label:"正常账号"},{value:1,label:"异常账号"},{value:2,label:"所有"},],
		    paramsend:{pageNum: 0, pageSize: 5, total: 0, current: 1,name01:"",state01:2,},
		    param: {pageNum: 0, pageSize: 5, total: 0, current: 1,name01:"",state01:2,},
			//下为更改弹框时展示及后续发送的内容
			checkNews02: {message:"",result:0,checkId:0},
			//elemanet-ui需要的变量
			dialogFormVisible02: false,
			disabled02:true,
			}
		},
		created(){
			this.queryAll();
		},
		methods:{
			// 条件查询用户 参数：分页条件和查找用户名和用户账号状态
			queryAll:function(){
				let fthis=this;
				$.ajax({
					url:"http://47.104.66.120:8081/user/queryAll",
					headers:{"token":localStorage.getItem("token")},
					data:fthis.param,
					success:function (data) {
						fthis.list=data.list;
						fthis.paramsend=data.obj;
						
						// console.log(fthis.list);
					}
				})
			},
			stateFormatter(row, column, cellValue, index){
				switch(cellValue){
					case 0: return '账号正常';
					case 1: return '账号异常';
					default : console.error("错误的状态"+cellValue);
				}
			},
			// 下面三个方法都是分页栏的方法
			prev: function () {
				if(this.paramsend.current!=this.param.current){
					this.param.current=this.paramsend.current-1;
				}else{
					this.param.current--;
				}
				
			},
			next: function () {
				if(this.paramsend.current!=this.param.current){
					this.param.current=this.paramsend.current+1;
				}else{
					this.param.current++;
				}
			},
			search(current){
				// console.log(current);
				this.param.current=current;
			},
			// 账号改为  可用=>0 不可用=>1
			examineUpdate:function (userId,status) {
				status=(status==0?1:0);
				// console.log(status);
				var fthis=this;
				$.ajax({
					url:"http://47.104.66.120:8081/user/StatueUpdate/",
					headers:{"token":localStorage.getItem("token")},
					type:"put",
					data:{current:fthis.param.current,name01:fthis.param.name01,state01:fthis.param.state01,userId:userId,status:status},
					success:function (data) {
						let message="失败";
						message=data.message;
						fthis.$message({
							showClose: true,
							message: '更改'+message,
							type: 'success'
						});
						fthis.queryAll();
					}
				})
			},
		},
		watch: {
		  param: {
		        //深度监听 监听对象中属性的变化以及集合中对象的变化
		      handler: function (novel, old) {
					this.queryAll();
					
		      },
		      deep: true
		  }
		}
	}
</script>

<style>
	#line01{
		width: 300px;
		white-space: nowrap;
		display:inline-block
	}
</style>
